<template>
  <div :style="{ 'min-width': minWidth + 'px' }">{{ innerValue }}</div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { isNullOrUndefOrEmpty } from "/@/utils/common";
import { TableColumnProps } from "ant-design-vue";

const props = defineProps<{
  column: TableColumnProps<any>;
  record: any;
}>();

const minWidth = ref(40);
watch(
  () => props.column.title,
  (val) => {
    if (!val) {
      minWidth.value = 40;
      return;
    }
    const div = document.createElement("div");
    div.className = "whitespace-nowrap";
    div.style.position = "fixed";
    div.style.left = "-9999px";
    div.style.top = "-9999px";
    div.innerHTML = `<span>${val}</span>`;
    document.body.appendChild(div);
    const span = div.querySelector("span");
    if (span) {
      minWidth.value = span.offsetWidth;
    }
    document.body.removeChild(div);
  },
  {
    immediate: true,
  }
);

const innerValue = computed(() => {
  const value = props.record[props.column.dataIndex as string];
  if (props.column.customRender) {
    return props.column.customRender({
      value,
      text: value,
      record: props.record,
      column: props.column,
      index: -1,
      renderIndex: -1,
    });
  }
  return isNullOrUndefOrEmpty(value) ? "--" : value;
});
</script>
